<template>
  <div>
    <!-- 选择法人弹窗 -->
    <el-dialog title="选择法定代表人" :visible.sync="dialogVisible" width="75%" :before-close="handleCancle">
      <el-form ref="form" :model="formInline" label-width="80px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="中文名" prop="chiName">
              <el-input v-model="formInline.chiName" size="small" @keyup.enter.native="handleSearchPeople"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="英文名" prop="engName">
              <el-input v-model="formInline.engName" size="small" @keyup.enter.native="handleSearchPeople"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <div style="margin-top: 5px">
              <el-button icon="el-icon-search" type="primary" size="small" @click="handleSearchPeople">查询</el-button>
              <el-button icon="el-icon-plus" type="primary" size="small" @click="handleAddPeople">新增</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div ref="dialogTable" class="table-box">
        <TableComponent :height="height" :columns="dialogTableColumns" :data="dialogtableData" :tableOption="dialogtableOption" @rowClick="rowClick" />
      </div>
      <span slot="footer">
        <el-button @click="handleCancle">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="新增自然人" :visible.sync="dialogVisibleNatural" width="60%" :before-close="handleCancleNatural">
      <el-form ref="formNatural" :model="formNatural" label-width="120px" :rules="rules" label-position="left" style="padding: 0 40px;">
        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="姓名" prop="nameChi">
              <el-input class="input" v-model="formNatural.nameChi" size="small"></el-input>
            </el-form-item>
            <el-form-item label="是否招商局员工" prop="ifcmhk">
              <el-select v-model="formNatural.ifcmhk" :class="[ifBtn?'select-btn':'select']" size="small" @change="cmhkChange">
                <el-option v-for="item in ifcmhkOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
              <el-button v-if="ifBtn" type="text" size="mini" @click="selectNum">查询工号</el-button>
            </el-form-item>
            <el-form-item label="招商局员工号" prop="cmhkPersonId" v-show="ifCmhkPeople">
              <el-input v-model="formNatural.cmhkPersonId" class="select" size="small"></el-input>
            </el-form-item>
            <el-form-item label="所属地区" prop="location">
              <el-cascader v-model="formNatural.location" :options="locationOptions" :props="prop" size="small" class="select" filterable></el-cascader>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input class="input" v-model="formNatural.email" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="英文名称" prop="nameEng">
              <el-input class="input" v-model="formNatural.nameEng" size="small"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-select v-model="formNatural.sex" placeholder="请选择" class="select" size="small">
                <el-option label="男" value="M"></el-option>
                <el-option label="女" value="F"></el-option>
                <el-option label="未知" value="U"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="手机号" prop="mobilePhone">
              <el-input class="input" v-model="formNatural.mobilePhone" size="small"></el-input>
            </el-form-item>
            <el-form-item label="固定电话" prop="telephone">
              <el-input class="input" v-model="formNatural.telephone" size="small"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancleNatural">取 消</el-button>
        <el-button type="primary" @click="handleSubmitNatural">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="选择员工" :visible.sync="dialogVisibleSelect" width="60%">
      <div ref="people" class="people-box">
        <TableComponent
          class="table"
          :data="tableData || []"
          :columns="tableColumns"
          :table-option="tableOption"
          @selectionChange="selectCheckd"
          :height="peopleHeight"
        >
        </TableComponent>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleSelect = false">取 消</el-button>
        <el-button type="primary" @click="handleSelect">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import TableComponent from '@/components/Table/table'
import { dialogTableColumns, tableColumns } from './index.js'
import { managementOrg, allArea } from '@/api/modules/propertyRight.js'
import { queryUserByEmpName, addNaturalData } from '@/api/modules/legalAndNatural.js'
export default {
  components: {
    TableComponent
  },
  props: {
    selectPeopleDialog: {
      type: Object,
      required: true
    },
  },
  watch: {
    selectPeopleDialog: {
      handler(val) {
        this.dialogVisible = val.dialogVisible
      },
      deep: true
    }
  },
  data() {
    return {
      dialogVisible: false,
      formInline: {
        type: '0',
        chiName: '',
        engName: ''
      },
      dialogTableColumns,
      dialogtableData: [],
      dialogtableOption: {
        isShowOperate: false
      },
      height: null,
      sendData: {
        value: '',
        code: ''
      },
      handleName: '',
      handleNameId: '',

      // 新增自然人弹窗参数============================
      dialogVisibleNatural: false,
      locationOptions: [],
      prop: {
        label: 'name',
        value: 'code',
        children: 'child'
      },
      formNatural: {
        nameChi: '',
        ifcmhk: '',
        cmhkPersonId: '',
        location: [],
        email: '',
        nameEng: '',
        sex: '',
        mobilePhone: '',
        telephone: ''
      },
      rules: {},
      ifBtn: false,
      ifCmhkPeople: false,
      ifcmhkOption: [
        { label: '是', value: '1' },
        { label: '否', value: '2' }
      ],
      rules: {
        nameChi: [{required: true, message: '请输入法人名称', trigger: 'blur'}],
        ifcmhk: [{required: true, message: '请选择是否招商局员工', trigger: 'change'}]
      },
      // 选择人弹窗
      dialogVisibleSelect: false,
      tableData: [],
      tableColumns,
      peopleHeight: null,
      tableOption: {
        isMultiSelect: true
      },
      savePeopleMsg: {}

    }
  },
  methods: {
    handleSearchPeople() {
      this.$nextTick(() => {
        this.height = this.$refs.dialogTable.offsetHeight
      })
      window.onresize = () => {
        this.height = this.$refs.dialogTable.offsetHeight
      }
      if (this.formInline.chiName === ''&&this.formInline.engName === '') {
        this.$message.error('中文名称或英文名称不能同时为空')
      } else {
        managementOrg(this.formInline).then(res => {
          this.dialogtableData = res.data.body
        })
      }
    },
    rowClick(val) {
      this.handleName = val.chiName
      this.handleNameId = val.code
    },
    handleCancle() {
      this.hideDialog()
    },
    handleSubmit() {
      if (this.handleName === ''||this.handleNameId === '') {
        this.$message.error('请选择法人代表')
      } else {
        this.sendData.value = this.handleName
        this.sendData.code = this.handleNameId
        this.hideDialog()
      }
    },
    // 关闭弹窗
    hideDialog() {
      this.dialogVisible = false
      this.formInline.chiName = ''
      this.formInline.engName = ''
      this.handleName = ''
      this.handleNameId = ''
      this.dialogtableData = []
      this.$emit('sendData', this.sendData)
    },
    // 新增人员
    handleAddPeople() {
      this.dialogVisibleNatural = true
      this.ifBtn = false
      allArea().then(res => {
        if (res.data.code === '0') {
          this.locationOptions = this.getTreeData(res.data.body)
        }
      })
    },
    getTreeData(data){
      // 循环遍历json数据
      for(let i=0;i<data.length;i++){
        if(data[i].child.length<1){
          // children若为空数组，则将children设为undefined
          data[i].child = undefined
        }else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].child)
        }
      }
      return data
    },
    // 新增自然人方法
    handleCancleNatural() {
      this.resetForm('formNatural')
      this.dialogVisibleNatural = false
    },
    handleSubmitNatural() {
      this.$refs['formNatural'].validate((valid) => {
        if (valid) {
          addNaturalData(this.formNatural).then(res => {
            if (res.data.code === '0') {
              this.$message.success('新增成功')
              this.resetForm('formNatural')
              this.dialogVisibleNatural  = false
            } else {
              this.$message.error(res.data.message)
            }
          })
        } else {
          return false
        }
      })
    },
    cmhkChange(val) {
      if (val === '1') {
        this.ifCmhkPeople = true
        this.ifBtn = true
      } else {
        this.ifCmhkPeople = false
        this.ifBtn = false
        this.formNatural.cmhkPersonId = ''
      }
    },
    // 选人弹窗方法===========================
    selectNum() {
      if (this.formNatural.nameChi === '') {
        this.$message.error('请输入姓名')
      } else {
        this.dialogVisibleSelect = true
        this.$nextTick(() => {
          this.peopleHeight = this.$refs.people.offsetHeight
        })
        window.onresize = () => {
          this.peopleHeight = this.$refs.people.offsetHeight
        }
        const data = {
          empName: this.formNatural.nameChi
        }
        queryUserByEmpName(data).then(res => {
          if (res.data.code === '200') {
            this.tableData = res.data.data
          } else {
            this.$message.error(res.data.message)
          }
        })
      }
    },
    selectCheckd(val) {
      if (val.length > 1) {
        this.$message.error('只能选择一条数据')
      } else  {
        this.savePeopleMsg = val[0]
      }
    },
    handleSelect() {
      this.dialogVisibleSelect = false
      this.formNatural.cmhkPersonId = this.savePeopleMsg.psId
      this.formNatural.nameChi = this.savePeopleMsg.empName
      this.formNatural.email = this.savePeopleMsg.email
      this.formNatural.sex = this.savePeopleMsg.sex
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
  .table-box {
    height: 40vh;
  }
  .select {
    width: 100%;
  }
  .select-btn {
    width: calc(100% - 60px);
  }
</style>
<style>
  .table-row th {
    text-align: center;
  }
</style>